<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 作业详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table :data="data" border  ref="multipleTable" @selection-change="handleSelectionChange">
                <!--<el-table-column type="index" width="40"></el-table-column>-->
                <!-- sortable -->
                <el-table-column label="日期时间">
                    <template slot-scope="scope" >
                        日期时间
                    </template>
                </el-table-column>
                <el-table-column label="学号">
                    <template slot-scope="scope" >
                        学号
                    </template>
                </el-table-column>
                <el-table-column label="微信名">
                    <template slot-scope="scope" >
                        微信名
                    </template>
                </el-table-column>
                <el-table-column label="微信号">
                    <template slot-scope="scope" >
                        微信号
                    </template>
                </el-table-column>
            </el-table>

            <!--学生附件-->
            <el-card class="box-card distance-100">
                <h3>作业视频附件</h3>
                <!-- <div id="dplayer1" style="max-width: 50%;margin: 0 auto">{{videoPlayer('dplayer1')}}</div> -->
            </el-card>
            <el-card class="box-card distance-100">
                <h3>作业音频附件</h3>
                <aplayer autoplay
                         :music="{
                            title: 'secret base~君がくれたもの~',
                            artist: 'Silent Siren',
                            src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
                            pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                          }"/>
            </el-card>
            <!--学生作业文字-->
            <el-card class="box-card distance-100">
                <h3>作业内容</h3>
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
                老师，我左手无名指不是很灵活怎么办。
            </el-card>

        </div>
        <div class="container" style="margin-top: 15px;">
            <h3>老师点评</h3>
            <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>
            <div style="text-align: center;">
                <el-button type="success" plain>选为精选作业</el-button>
                <el-button type="primary">点评发布</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    // 视频插件
    // import 'DPlayer/dist/DPlayer.min.css'
    // import DPlayer from 'DPlayer'
    // 音频插件
    import Aplayer from 'vue-aplayer'
    export default {
        components: {
            Aplayer
        },
        data() {
            return {
                url: './static/vuetable.json',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                form: {
                    name: '',
                    date: '',
                    address: ''
                },
                idx: -1,

                textarea: ''
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
//                return this.tableData.filter((d) => {
//                    let is_del = false;
//                    for (let i = 0; i < this.del_list.length; i++) {
//                        if (d.name === this.del_list[i].name) {
//                            is_del = true;
//                            break;
//                        }
//                    }
//                    if (!is_del) {
//                        if (d.address.indexOf(this.select_cate) > -1 &&
//                            (d.name.indexOf(this.select_word) > -1 ||
//                            d.address.indexOf(this.select_word) > -1)
//                        ) {
//                            return d;
//                        }
//                    }
//                })
                return [{name:1,index:0}]
            }
        },
        methods: {
            videoPlayer(obj, url) {
                // this.$nextTick(() => {
                //     const dp = new DPlayer({
                //         container: document.getElementById(obj),
                //         video: {
                //             url: 'http://mb-bucket.gz.bcebos.com/musiclib/str_692/VLABNJ.mp4'
                //         }
                //     });
                // })

            },
            // 获取 easy-mock 的模拟数据
            getData() {
                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
                if (process.env.NODE_ENV === 'development') {
                    this.url = '/ms/table/list';
                };
                this.$axios.post(this.url, {
                    page: this.cur_page
                }).then((res) => {
                    this.tableData = res.data.list;
                })
            },
            search() {
                this.is_search = true;
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form = {
                    name: item.name,
                    date: item.date,
                    address: item.address
                }
                this.editVisible = true;
            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error('删除了' + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                this.$set(this.tableData, this.idx, this.form);
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx+1} 行成功`);
            },
            // 确定删除
            deleteRow(){
                this.tableData.splice(this.idx, 1);
                this.$message.success('删除成功');
                this.delVisible = false;
            }
        }
    }

</script>

<style scoped>
    .distance-100 {
        margin-top: 50px;
    }
</style>
